<template>
  <div class="label__wrap" :class="{ 'disabled': disabled }">
    <el-tag
      :size="size"
      :key="index"
      v-for="(tag, index) in dynamicTags"
      :closable="!modify"
      :disable-transitions="false"
      @close="handleClose(tag)"
    >{{tag}}</el-tag>
    <el-input
      class="input-new-tag"
      :maxlength="maxlength"
      v-if="inputVisible"
      v-model="inputValue"
      ref="saveTagInput"
      @keyup.enter.native="handleInputConfirm"
      @blur="handleInputConfirm"
    ></el-input>
    <el-button v-else-if="!modify" class="button-new-tag" @click="showInput">+ 添加标签</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputVisible: false,
      inputValue: ""
    };
  },
  props: {
    value: {
      type: Array,
      required: true
    },
    size: {
      default: 'mini',
      type: String
    },
    maxlength: [Number, String],
    modify: Boolean,
    disabled: Boolean
  },
  computed: {
    dynamicTags: {
      get() {
        return this.value
      },
      set(dynamicTags) {
        this.$emit('input', dynamicTags)
      }
    }
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.label__wrap {
  min-height: 39px;
  border: 1px solid #e3e3e3;
  box-sizing: border-box;
  padding: 2.5px 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-height: 84px;
  border-radius: 5px;
  @include scrollBar;
  &.disabled {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #c0c4cc;
  }

  /deep/ .el-button {
    height: 22px;
    line-height: 22px;
    line-height: 100%;
    padding: 0 11px;
    margin-left: 10px;
    margin-top: 2.5px;
    margin-bottom: 2.5px;
    border-radius: 20px;
  }
  /deep/ .el-input {
    margin-top: 2.5px;
    margin-bottom: 2.5px;
    margin-left: 10px;
    width: 100px;
    height: 22px;
    line-height: 22px;
    input {
      height: 100%;
      width: 100%;
      border-radius: 20px;
    }
  }
  /deep/ .el-tag + .el-tag {
    margin-left: 10px;
  }
  .el-tag {
    border-radius: 20px;
  }
  /deep/ .el-tag {
    margin-top: 2.5px;
    margin-bottom: 2.5px;
  }
}
</style>
